<template>
  <div class="container-pt">
    <van-nav-bar left-arrow  @click-left="$router.back()" fixed title="我的文章"/>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
   <article-list :disable-swiper="false" v-for="(item,index) in list" :key="index" :item="item">
     <van-button square type="warning" @click="active=true" text="修改" />
     <van-button square type="danger" text="删除" @click="delArticleClick(item.id)"/>
    </article-list>
</van-list>
  
    <van-popup v-model="active" style="height:100%" position="bottom">
      <van-nav-bar title="修改文章" >
        <template #right>
          <van-icon name="close" @click="active=false" size="18" />
        </template>
      </van-nav-bar>
      <article-form></article-form> 
    </van-popup>
  </div>
</template>

<script>
import articleList from '@/components/article-list.vue'
import articleForm from '@/components/article-form.vue'
import {userArticle} from '../../api/user'
import {delArticle} from '../../api/user'
export default {
  components: { articleList,articleForm },
  data() {
    return {
      active:false,
      page:1,
      limit:10,
      list:[],
      loading: false,
      finished: false,
    };
  },
 async created(){
  // const res = await  userArticle({page:this.page,limit:this.limit})
  // // console.log(res);
  // this.list = res.data.data
  },
  methods:{
    async onLoad() {
          // console.log(1212);
      // 异步更新数据
        const res =  await userArticle({page:this.page,limit:this.limit})
        console.log(res.data.data);
          this.list.push(...res.data.data)
      // await this.$store.commit('indexList/updatePage')
      // await this.$store.dispatch('indexList/getNewList')
      this.page++
      // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.page > res.data.totalPages) {
          this.finished = true;
        }
    },
   async delArticleClick(id){
    // console.log(12121212);
    const res = await delArticle({id})
    // console.log(res);
        if(res.errno !== 0) return 
        this.$toast.success('删除成功')
       this.list = this.list.filter(item => item.id !== id)
    }
  }
};
</script>

<style>

</style>